* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #EEEEEE;
    height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: auto;
}

.page{
    width: 100%;
    height: 100%;
}


@media screen and (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

input[type=radio] {
    display: none;
}
/* 每次点击按钮 重置当前焦点按钮的样式 */
input[type=radio]:checked ~ .count label{
    background: #494a4c;
}
/* 重置当前显示的左右按钮 */
input[type=radio]:checked ~ .dir_box label{
    display: none;
}

.home .count .current label{
    background:white;
}

/* 下方按钮1 */
#btn1:checked ~ .pic .box{
    margin-left: 0;
}
#btn1:checked ~ .count .btn_1{
    background:white;
}
#btn1:checked ~ .dir_box .btn_btn_1{
    display: flex;
}

/* 下方按钮2 */
#btn2:checked ~ .pic .box{
    margin-left: -100%;
}
#btn2:checked ~ .count .btn_2{
    background:white;
}
#btn2:checked ~ .dir_box .btn_btn_2{
    display: flex;
}

/* 下方按钮3 */
#btn3:checked ~ .pic .box{
    margin-left: -200%;
}
#btn3:checked ~ .count .btn_3{
    background:white;
}
#btn3:checked ~ .dir_box .btn_btn_3{
    display: flex;
}

/* 下方按钮4 */
#btn4:checked ~ .pic .box{
    margin-left: -300%;
}
#btn4:checked ~ .count .btn_4{
    background:white;
}
#btn4:checked ~ .dir_box .btn_btn_4{
    display: flex;
}

/* 下方按钮5 */
#btn5:checked ~ .pic .box{
    margin-left: -400%;
}
#btn5:checked ~ .count .btn_5{
    background:white;
}
#btn5:checked ~ .dir_box .btn_btn_5{
    display: flex;
}


/* 左边第一个按钮 */
#left_btn1:checked ~ .pic .box{
    margin-left: -400%;
}
#left_btn1:checked ~ .count .btn_5{
    background:white;
}
#left_btn1:checked ~ .pic .before_box{
    transition: right 0.8s;
    opacity:1;
    right:-100%;
}
#left_btn1:checked ~ .dir_box .btn_btn_5{
    display: flex;
}

/* 右边第一个按钮 */
#right_btn1:checked ~ .pic .box{
    margin-left: -100%;
}
#right_btn1:checked ~ .count .btn_2{
    background:white;
}
#right_btn1:checked ~ .dir_box .btn_btn_2{
    display: flex;
}

/* 左边第二个按钮 */
#left_btn2:checked ~ .pic .box{
    margin-left: 0;
}
#left_btn2:checked ~ .count .btn_1{
    background:white;
}
#left_btn2:checked ~ .dir_box .btn_btn_1{
    display: flex;
}

/* 右边第二个按钮 */
#right_btn2:checked ~ .pic .box{
    margin-left: -200%;
}
#right_btn2:checked ~ .count .btn_3{
    background:white;
}
#right_btn2:checked ~ .dir_box .btn_btn_3{
    display: flex;
}

/* 左边第三个按钮 */
#left_btn3:checked ~ .pic .box{
    margin-left: -100%;
}
#left_btn3:checked ~ .count .btn_2{
    background:white;
}
#left_btn3:checked ~ .dir_box .btn_btn_2{
    display: flex;
}

/* 右边第三个按钮 */

#right_btn3:checked ~ .pic .box{
    margin-left: -300%;
}
#right_btn3:checked ~ .count .btn_4{
    background:white;
}
#right_btn3:checked ~ .dir_box .btn_btn_4{
    display: flex;
}

/* 左边第四个按钮 */

#left_btn4:checked ~ .pic .box{
    margin-left: -200%;
}
#left_btn4:checked ~ .count .btn_3{
    background:white;
}
#left_btn4:checked ~ .dir_box .btn_btn_3{
    display: flex;
}

/* 右边第四个按钮 */

#right_btn4:checked ~ .pic .box{
    margin-left: -400%;
}
#right_btn4:checked ~ .count .btn_5{
    background:white;
}
#right_btn4:checked ~ .dir_box .btn_btn_5{
    display: flex;
}

/* 左边第五个按钮 */

#left_btn5:checked ~ .pic .box{
    margin-left: -300%;
}
#left_btn5:checked ~ .count .btn_4{
    background:white;
}
#left_btn5:checked ~ .dir_box .btn_btn_4{
    display: flex;
}

/* 右边第五个按钮 */

#right_btn5:checked ~ .pic .box{
    margin-left: -500%;
    transition: margin 0.8s 0s;
}
#right_btn5:checked ~ .pic .after_box{
    transition: left 0.8s;
    opacity:1;
    left:-100%;
}
#right_btn5:checked ~ .pic .box{
    margin-left: 0;
    transition: margin 0.8s 0s;
}
#right_btn5:checked ~ .count .btn_1{
    background:white;
}
#right_btn5:checked ~ .dir_box .btn_btn_1{
    display: flex;
}
.color-mode-btn{
    color: #505050;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font: 400 12px Inter, sans-serif;
    cursor: pointer;

}
.color-mode-btn .iconfont{
    font-size: 22px;
}

/* 色盲模式按钮 */
.color-mode-off-btn{
    display: none;

}

.color-mode-on-btn{
    display: flex;
}

/* 开启色盲模式 */
#color-mode-on:checked ~ .page .color-mode-off-btn{
    display: flex;
}

#color-mode-on:checked ~ .page img{
    filter: hue-rotate(52deg);
}

#color-mode-on:checked ~ .page .color-mode-on-btn{
    display: none;
}

/* 关闭色盲模式 */
#color-mode-off:checked ~ .page .color-mode-on-btn{
    display: flex;
}

#color-mode-off:checked ~ .page img{
    filter: none;
}

#color-mode-off:checked ~ .page .color-mode-off-btn{
    display: none;
}


a{
    text-decoration: none;
    outline: none;
    color: #000;
}
header {
    align-items: center;
    display: flex;
    width: 100%;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}

@media (max-width: 991px) {
    header {
        max-width: 100%;
    }
}

/*.font-mid{*/
/*    font-size: 16px;*/
/*}*/

.mask {
    width: 100%;
    height: 100vh;
    background-color: #333333;
    opacity: 0.9;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    display: none;
    /* overflow: hidden; */
}

.mask-main{
    width: 100%;
    height:200px;
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    /* overflow: hidden; */
}

.mask-close {
    position: fixed;
    right: 100px;
    top: 100px;
    font-size: 30px;
    color: #fff;
}

.mask-close span{
    font-size: 24px;
}

#mask-on:checked ~ .page .mask{
    display: flex;
}

#mask-on:checked ~ .page{
    overflow: hidden;
    /*height: 100;*/
}

#mask-off:checked ~ .page .mask{
    display: none;
}

#mask-off:checked ~ .page{
    overflow: auto;
    /*height: 100;*/
}

.shortcut-bar {
    justify-content: flex-end;
    align-items: center;
    border-bottom: 1px solid #dedede;
    background-color: #eee;
    display: flex;
    width: 100%;
    padding-top: 6px;
    padding-bottom: 6px;
}

@media (max-width: 991px) {
    .shortcut-bar {
        max-width: 100%;
        padding: 5px 0;
    }
}



.long-nav{
    padding-left: 150px;
    padding-right: 150px;
}

@media (max-width: 991px) {
    .long-nav {
        padding-left: 0px;
        padding-right: 0px;
    }
}
.short-nav {
    padding-left: 350px;
    padding-right: 350px;
}


.shortcut-btn {
    justify-content: flex-end;
    align-items: center;
    align-self: end;
    display: flex;
    width: 500px;
    max-width: 100%;
    gap: 20px;
}

@media (max-width: 991px) {
    .shortcut-btn {
        margin-right: 10px;
        justify-content: center;
    }
}

.nav-icon {
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center;
    width: 60px;

}


.username {
    cursor: pointer;
    margin: auto 0;
    font: 400 12px Inter, sans-serif;
    text-wrap: none;
    color: #505050;
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-icon span{
    font-size: 22px;
}
.language {
    color: #505050;
    align-self: center;
    text-wrap: none;
    margin: auto 0;
    font: 400 12px Inter, sans-serif;
}

@media (max-width: 991px) {
    .language {
        text-wrap: initial;
    }
}

.nav-bar {
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #dedede;
    background-color: #eee;
    display: flex;
    width: 100%;
    flex-direction: column;
    /* padding: 0 150px; */
}

@media (max-width: 991px) {
    .nav-bar {
        max-width: 100%;
    }
}

.nav-container {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.nav-icon-short{
    width: 22px;
    border-radius: 50%;
}

@media (max-width: 991px) {
    .nav-container {
        max-width: 100%;
        justify-content: center;
        /*flex-wrap: wrap;*/
    }
}

.nav-menu {
    justify-content: flex-start;
    align-items: center;
    display: flex;
    gap: 18px;
    padding: -10px 0;
    font-size: 20px;
    font-weight: bold;
    color: #505050;
}

@media (max-width: 991px) {
    .nav-menu {
        justify-content: center;
    }
}
.nav-menu a{
    display: flex;
    align-items: center;
}

.logo {
    display: flex;
}

@media (max-width: 991px) {
    .logo {
        display: none;
    }
}

.nav-bar-item {
    display: flex;
    align-items: center;
    color: #000;
    margin: auto 0;
    height: 60px;
    padding: 0 10px;
    border-bottom: 3px solid transparent;
    border-radius: 2px;
}


@media (max-width: 991px) {
    .nav-bar-item {
        text-wrap: initial;
    }
}

.nav-bar-item:hover {
    color: #fff;
    background-color: #000;
}
.nav-side-menu span{
    font-size: 22px;
}

.nav-bar-active {
    border-bottom: 3px solid #646464;
}

.logged-content{
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    max-width: 200px;

}

@media (max-width: 991px) {
    .logged-content {
        justify-content: center;
    }
}

.logged-content .split-line{
    width: 0.5px;
    height: 10px;
    background-color: #000;
}
/*公共页脚*/
.footer-nav {
    justify-content: center;
    align-items: center;
    background-color: #282828;
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: 45px 20px;
}

@media (max-width: 991px) {
    .footer-nav {
        max-width: 100%;
        padding-top: 20px;
    }
}

.footer-info {
    display: flex;
    justify-content: center;
    width: 785px;
    max-width: 100%;
}

@media (max-width: 991px) {
    .footer-info {
        flex-direction: column;
        gap: 0;
    }
}

.footer-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    width: 34%;
    padding-left: 5px;
    /*gap: 20px*/
}

@media (max-width: 991px) {
    .footer-group {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        align-items: center;
    }
}

.footer-group:not(:first-child) {
    border-left: 1px solid #fff;
}

@media (max-width: 991px) {
    .footer-group:not(:first-child) {
        padding-top: 20px;
        border: none;
        border-top: 1px solid #fff;
    }
}

.footer-nav-title {
    color: #fff;
    text-wrap: none;
    font: 400 16px Inter, sans-serif;
}

@media (max-width: 991px) {
    .footer-nav-text {
        text-wrap: initial;
    }
}

.footer-nav-text {
    color: #dedede;
    margin-top: 10px;
    text-wrap: none;
    font: 400 16px Inter, sans-serif;
}

.footer-info-2 {
    align-items: center;
    background-color: #eee;
    display: flex;
    width: 100%;
    justify-content: flex-start;
    padding: 20px 20px;
    gap: 20px;
}

@media (max-width: 991px) {
    .footer-info-2 {
        max-width: 100%;
    }
}

.footer-info-container {
    align-self: start;
    display: flex;
    margin-left: 30px;
    width: 168px;
    max-width: 100%;
    align-items: flex-start;
    gap: 10px;
}

@media (max-width: 991px) {
    .footer-info-container {
        margin-left: 10px;
    }
}

.logo-2 {
    background-color: #d9d9d9;
    width: 49px;
    height: 23px;
}

.footer-text {
    color: #000;
    text-wrap: none;
    font: 400 18px Inter, sans-serif;
}

@media (max-width: 991px) {
    .footer-text {
        text-wrap: initial;
    }
}

@font-face {
    font-family: "iconfont"; /* Project id 4308456 */
    src: url('iconfont.woff2?t=1698761890825') format('woff2'),
         url('iconfont.woff?t=1698761890825') format('woff'),
         url('iconfont.ttf?t=1698761890825') format('truetype');
  }

.gallery input[type=radio] {
    display: none;
}

.gallery li {
    list-style-type: none;
}

.gallery .container {
    z-index: 1;
    position: relative;
    width: 100%;
    max-height: calc(100vh - 97px);
    background: #333;
    overflow: hidden;
    margin-top: 97px;
}
@media (max-width: 991px) {
    .gallery .container {
        max-width: 100%;
    }
}
.gallery .pic {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.gallery .pic .box {
    position: relative;
    width: 400%;
    height: 100%;
    transition: margin 0.8s;
}

.gallery .pic .box .item {
    width: calc(100% / 4);
    height: 100%;
    float: left;
    background-color: #fff;
    display: flex;
}

@media (max-width: 991px) {
    .gallery .pic .box .item {
        max-width: 100%;
        flex-direction: column;
    }
}

.gallery .pic .box .item .item-text{
    padding: 50px;
    width: calc(100% / 3);
    display: flex;
    flex-direction: column;
    gap: 30px;
}

@media (max-width: 991px) {
    .gallery .pic .box .item .item-text{
        max-width: 100%;
        width: 100%;
        /*min-height: 200px;*/
        height: auto;
    }
}

.gallery .pic .box .item .item-text .item-title{
    display: flex;
    /*gap: 20px;*/
    align-items: flex-end;
}
.gallery .pic .box .item .item-text .item-title .item-tag{
    font-size: 20px;
    color: #e20020;
    border-right: 1px solid #000000;
    padding: 0 5px;
}

.gallery .pic .box .item .item-text .item-title .item-time{
    /*font-size: 18px;*/
    padding: 0 5px;
    /*border-left: 1px solid #000000;*/
    color: #282828;
}

.gallery .item-content{
    color: #505050;
    font-size: 16px;
    padding-right: 80px;
    line-height: 30px;
}

.gallery .pic .box .item > img {
    width: calc(100% / 3 * 2);
    height: 100%;
    color: white;
    object-fit: cover;
    float: right;
}

.gallery .pic .box .item-full img{
    width: 100%;
    height: 100%;
}
@media (max-width: 991px) {
    .gallery .pic .box .item > img {
        width: 100%;
        flex-direction: column;
    }
}

.gallery .pic .box .item .col-img{
    object-fit: contain;
}

.gallery .dir_box {
    position: absolute;
    top: 0;
    /*left: calc(100%/3 * 2);*/
    display: flex;
    width: calc((100%) / 3);
    height: 100%;
    /*background: rgba(0, 0, 0, .2);*/
}

@media (max-width: 991px) {
    .gallery .dir_box {
        width: calc((100%) / 2);
    }
}

.gallery .left_box {
    left: calc(100%/3 * 1);
}

@media (max-width: 991px) {
    .gallery .left_box {
        left: 0;
    }
}
.gallery .right_box {
    right: 0;
}

.gallery .dir_box label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    width: 100%;
    height: 100%;
    color: white;
    cursor: pointer;
}

.gallery .left_box:hover {
    content: "<";
    color: #fff;
}

.gallery .right_box:hover {
    content: ">";
    color: #fff;
}

.gallery .dir_box label {
    display: none;
}

.gallery .left_box .left_btn_1 {
    display: flex;
}

.gallery .right_box .right_btn_1 {
    display: flex;
}

.introd .intro-main {
    justify-content: center;
    align-items: center;
    /*align-self: stretch;*/
    background-color: #fff;
    display: flex;
    width: 100%;
    flex-direction: column;
    margin-top: 98px;
    padding: 0 350px 110px;
}
@media (max-width: 991px) {
    .introd .intro-main {
        width: 100%;
        padding: 0 20px 110px;
    }
}
.introd .intro-user-row {
    align-items: center;
    align-self: center;
    border-bottom: 1px solid #dedede;
    display: flex;
    width: 100%;
    /*max-width: 1240px;*/
    flex-direction: column;
    padding: 23px 20px 23px 20px;
}
@media (max-width: 991px) {
    .introd .intro-user-row {
        max-width: 100%;
    }
}
.introd .intro-user {
    align-self: start;
    display: flex;
    width: 400px;
    max-width: 100%;
    align-items: flex-start;
    gap: 10px;
}
.introd .img-2 {
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center;
    width: 60px;
    overflow: hidden;
    border-radius: 50%;
    align-self: stretch;
    max-width: 100%;
}
.introd .intro-name {
    color: #000;
    align-self: center;
    text-wrap: none;
    margin: auto 0;
    font: 700 24px Inter, sans-serif;
}
@media (max-width: 991px) {
    .introd .intro-name {
        text-wrap: initial;
    }
}
.introd .intro-container {
    align-items: center;
    align-self: center;
    border-bottom: 1px solid #dedede;
    display: flex;
    margin-top: 10px;
    width: 100%;
    /*max-width: 1240px;*/
    flex-direction: column;
    padding: 10px 100px 10px 0;
}
@media (max-width: 991px) {
    .introd .intro-container {
        max-width: 100%;
        padding: 10px 20px 10px 20px;
    }
}
.introd .intro-info {
    /*align-self: stretch;*/
    /*margin-left: 17px;*/
    width: 100%;
    font: 700 24px Inter, sans-serif;
    text-indent: 1.8em;
    line-height: 60px;
}
.introd .intro-message {
    color: #000;
    align-self: center;
    text-wrap: normal;
    width: 100%;
    font: 200 20px Inter, sans-serif;
    line-height: 30px;
    text-indent: 2em;
}

@media (max-width: 991px) {
    .introd .intro-info .intro-message {
        text-wrap: initial;
    }
}

.introd .intro-imgs {
    align-self: stretch;
    background-color: #f00;
    display: flex;
    width: 842px;
    height: 201px;
    flex-direction: column;
    margin: 0 auto;
}
@media (max-width: 991px) {
    .introd .intro-imgs {
        max-width: 100%;
        margin-top: 35px;
    }
}
.introd .imgs-group-container {
    justify-content: center;
    align-items: center;
    align-self: center;
    display: flex;
    width: 100%;
    /*max-width: 1240px;*/
    flex-direction: column;
    margin: 30px 0 -22px;
}
@media (max-width: 991px) {
    .introd .imgs-group-container {
        max-width: 100%;
        margin-bottom: 10px;
    }
}

.introd .imgs-group {
    /*justify-content: center;*/
    align-items: flex-start;
    flex-wrap: nowrap;
    display: flex;
    gap: 10px;
    width: 100%;
    /*max-width: 1240px;*/
    margin-bottom: 20px;
    overflow-x: scroll;
    overscroll-behavior: contain;
}
@media (max-width: 991px) {
    .introd .imgs-group {
        max-width: 100%;
        flex-wrap: wrap;
    }
}


/*.imgs-group::-webkit-scrollbar {*/
/*    width: 0;*/
/*    height: 0;*/
/*    background-color: transparent;*/
/*}*/

.introd .img-box {
    flex-shrink: 0;
    height: 20vh;
    background-color: #5445ff;
}

@media (max-width: 991px) {
    .introd .img-box {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
}


.collections .main-container {
    background-color: #fff;
    background-clip: content-box;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    display: flex;
    margin-top: 120px;
    width: 100%;
    flex-direction: column;
    padding: 10px 350px;
    margin-bottom: 50px;

}

@media (max-width: 991px) {
    .collections .main-container {
        max-width: 100%;
        padding: 10px 20px;
        margin-top: 100px;
    }
}

.collections .main-container > div {
    box-sizing: border-box;
}

.collections .main-header {
    justify-content: space-between;
    display: flex;
    width: 100%;
    font: 400 16px Inter, sans-serif;
    padding: 0 !important;
}

@media (max-width: 991px) {
    .collections .main-header {
        max-width: 100%;
        flex-wrap: wrap;
    }
}

.collections .main-container .main-header .tag {
    color: #fff;
    text-wrap: none;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    background-color: #000;
    width: 98px;
    max-width: 100%;
    padding: 8px 0 8px 13px;
}

.collections .header-btns {
    align-items: center;
    display: flex;
    gap: 0;
}

.collections .header-btns .btn {
    display: flex;
    text-wrap: none;
    justify-content: center;
    align-items: center;
    border: 1px solid #dedede;
    width: 110px;
    padding: 8px;
}


.collections .header-btns .btn a {
    color: #dedede;
    text-wrap: none;
}

@media (max-width: 991px) {
    .collections .header-btns .btn a {
        text-wrap: initial;
    }
}

.collections .nav-info {
    color: #a1a1a1;
    align-self: start;
    text-wrap: none;
    font: 400 20px Inter, sans-serif;
    padding: 20px 20px;
}


@media (max-width: 991px) {
    .collections .nav-info {
        text-wrap: initial;
    }
}

.collections .cover {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    border-bottom: 1px solid #dedede;
    width: 100%;
    padding: 0 20px 50px 20px;
    gap: 20px;
}

@media (max-width: 991px) {
    .collections .cover {
        flex-direction: column-reverse;
        max-width: 100%;
    }
}

.collections .cover .cover-img {
    background-color: #f00;
    display: flex;
    width: 400px;
    height: auto;
    box-shadow: rgba(0, 0, 0, 0.45) 1px 1px 6px 0;
    object-fit: cover;
}

@media (max-width: 991px) {
    .collections .cover .cover-img {
        width: 100%;
        height: auto;
        margin-top: 10px;
    }
}

.collections .cover-info {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.collections .cover-info .cover-title {
    display: flex;
    gap: 10px;
    font-size: 24px;
    font-weight: bold;
}

.collections .cover-info .cover-title .cover-name {
    color: #000;
}

.collections .cover-info .cover-title .cover-time {
    color: #dedede;
}

.collections .cover-info .cover-btns {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.collections .cover-info .cover-btns .cover-btn {
    display: flex;
    gap: 10px;
    align-items: center;
}

.collections .cover-info .cover-btns .cover-btn .iconfont {
    color: #e20020;
    font-size: 20px;
}

.collections .cover-info .cover-btns .cover-btn .text {
    color: #919191;
    font-style: oblique;
}

.collections .display-part {
    align-items: flex-start;
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: 30px 20px;
}

@media (max-width: 991px) {
    .collections .display-part {
        max-width: 100%;
    }
}



.collections .switch-btns {
    display: flex;
    max-width: 100%;
    gap: 10px;
}

.collections .switch-btn {
    text-wrap: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 11px 10px 12px;
    font: 400 16px Inter, sans-serif;
    gap: 8px;
    cursor: pointer;
}
.collections .switch-btn label{
    display: flex;
    gap: 5px;
}


.collections .switch-btns .switch-pre-btn {
    color: #fff;
    background-color: #282828;
}

label{
    cursor: pointer;
}
.collections .switch-btns .switch-con-btn {
    color: #000;
    background-color: #fff;
}


.collections .switch-btns .switch-pre-btn:hover{
    color: #fff;
    background-color: #e40018;
}
.collections .switch-btns .switch-con-btn:hover{
    color: #fff;
    background-color: #e40018;
}

@media (max-width: 991px) {
    .collections .switch-btns .content, .pre {
        text-wrap: initial;
    }
}

.collections .pre-box {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    /*box-shadow: rgba(0, 0, 0, 0.45) 1px 1px 3px 0px;*/
}

.collections .content-box {
    display: none;
    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.45);
    padding: 80px 334px 80px 138px;
}

@media (max-width: 991px) {
    .collections .content-box {
        text-wrap: initial;
        padding: 20px;
    }
}


.collections .content-box .content-box-title{
    margin-bottom: 20px;
    color: #E20020;
    font-size: 24px;
    font-weight: bold;
}

.collections .content-box  .content-box-text{
    display: flex;
    flex-direction: column;
    gap:20px;
}

.collections .group-imgs {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 20px;

}

.collections .group-imgs-item {
    width: 250px;
    height: 160px;
    background-color: #000;
    margin-bottom: 20px;
}

.collections .to-top {
    color: #a1a1a1;
    align-self: start;
    margin-top: 70px;
    text-wrap: none;
    font: 400 20px Inter, sans-serif;
    padding: 0 0 30px 20px;
}

.collections .to-top a {
    text-decoration: none;
    color: #000;
}

@media (max-width: 991px) {
    .collections .to-top {
        margin-top: 40px;
        text-wrap: initial;
    }
}

.collections .box {
    width: 100%;
    height: auto;
    max-width: 100%;
    /*border: 1px solid #ddd;*/
    overflow: hidden;
    box-sizing: border-box;
    /*margin-top: 90px;*/
}

@media (max-width: 991px) {
    .collections .box {
        height: auto;
        text-wrap: initial;
    }
}



.collections .box img {
    width: 100%;
    height: 100%;
    /*height: 500px;*/
    object-fit: cover;
    box-shadow: 1px 1px 6px 0 rgba(0, 0, 0, 0.45);
}

.collections .anchor {
    width: 100%;
    /*height: 100%;*/
    display: flex;
    justify-content: flex-start;
    padding-top: 10px;
    gap: 10px;
    flex-wrap: wrap;
}

.collections .anchor div {
    max-width: 250px;
    height: 160px;
    margin-top: 20px;
    /*box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;*/
}

@media (max-width: 991px) {
    .collections .anchor div {
        max-width: 100px;
        height: 60px;
    }
}

.collections .click {
    display: flex;
    /* width: 100%;
    height: 100%; */
    /*border: 1px solid #ccc;*/
    background: #f7f7f7;
    color: #333;
    box-shadow: 1px 1px 6px 0 rgba(0, 0, 0, 0.45);
}

.collections .click:hover {
    background: #eee;
    color: #345;
}

.collections .click img {
    /* width: 100%;
    height: 100%; */
    object-fit: cover;
}

/* 控制部分代码 */


/* 重置当前显示的左右按钮 */
input[type=radio]:checked ~ .dir_box label {
    display: none;
}
/*.gallery-control input[type=radio]:checked ~ .dir_box label {*/
/*    display: none;*/
/*}*/

/* 左边第一个按钮 */
.gallery-control #left_btn1:checked ~ .pic .box {
    margin-left: -200%;
}

/*#left_btn1:checked ~ .pic .before_box {*/
/*    transition: right 0.8s;*/
/*    opacity: 1;*/
/*    right: -100%;*/
/*}*/

.gallery-control #left_btn1:checked ~ .dir_box .btn_btn_3 {
    display: flex;
}

/* 右边第一个按钮 */
.gallery-control #right_btn1:checked ~ .pic .box {
    margin-left: -100%;
}


.gallery-control #right_btn1:checked ~ .dir_box .btn_btn_2 {
    display: flex;
}

/* 左边第二个按钮 */
.gallery-control #left_btn2:checked ~ .pic .box {
    margin-left: 0;
}

.gallery-control #left_btn2:checked ~ .dir_box .btn_btn_1 {
    display: flex;
}

/* 右边第二个按钮 */
.gallery-control #right_btn2:checked ~ .pic .box {
    margin-left: -200%;
}


.gallery-control #right_btn2:checked ~ .dir_box .btn_btn_3 {
    display: flex;
}

/* 左边第三个按钮 */
.gallery-control #left_btn3:checked ~ .pic .box {
    margin-left: -100%;
}

.gallery-control #left_btn3:checked ~ .count .btn_2 {
    background: white;
}

.gallery-control #left_btn3:checked ~ .dir_box .btn_btn_2 {
    display: flex;
}


/* 右边第五个按钮 */

.gallery-control #right_btn3:checked ~ .pic .box {
    margin-left: 0;
    transition: margin 0.8s 0s;
}

.gallery-control #right_btn3:checked ~ .pic .after_box {
    transition: left 0.8s;
    opacity: 1;
    left: -100%;
}

/*#right_btn3:checked ~ .pic .box {*/
/*    margin-left: 0;*/
/*    transition: margin 0.8s 0s;*/
/*}*/

.gallery-control #right_btn3:checked ~ .count .btn_1 {
    background: white;
}

.gallery-control #right_btn3:checked ~ .dir_box .btn_btn_1 {
    display: flex;
}

@media (max-width: 991px) {
    .gallery-control .left_box {
        left: 0;
    }
}


@media (max-width: 991px) {
    .gallery-control .dir_box {
        width: calc((100%) / 2);
    }
}

@media (max-width: 991px) {
    .gallery-control .pic .box .item > img {
        width: 100%;
        flex-direction: column;
    }
}

@media (max-width: 991px) {
    .gallery-control .container {
        max-width: 100%;
    }
}

@media (max-width: 991px) {
    .gallery-control .pic .box .item .item-text{
        max-width: 100%;
        width: 100%;
        height: auto;
    }
}


/* 控制部分代码 */


/* 重置当前显示的左右按钮 */
.gallery-control1 input[type=radio]:checked ~ .dir_box label {
    display: none;
}

.gallery-control2 input[type=radio]:checked ~ .dir_box label {
    display: none;
}

/* 左边第一个按钮 */
.gallery-control2 #left_btn1:checked ~ .pic .box{
    margin-left: -300%;
}
.gallery-control1 #left_btn1:checked ~ .pic .box {
    margin-left: -300%;
}

/*#left_btn1:checked ~ .pic .before_box {*/
/*    transition: right 0.8s;*/
/*    opacity: 1;*/
/*    right: -100%;*/
/*}*/
.gallery-control2 #left_btn1:checked ~ .dir_box .btn_btn_4{
    display: flex;
}
.gallery-control1 #left_btn1:checked ~ .dir_box .btn_btn_4 {
    display: flex;
}

.gallery-control1 #left_btn1:checked ~ .left_box{
    left: 0;
}
/* 右边第一个按钮 */
.gallery-control2 #right_btn1:checked ~ .pic .box{
    margin-left: -100%;
}
.gallery-control1 #right_btn1:checked ~ .pic .box {
    margin-left: -100%;
}

.gallery-control1 #right_btn1:checked ~ .left_box{
    left: 0;
}

.gallery-control2 #right_btn1:checked ~ .dir_box .btn_btn_2{
    display: flex;
}
.gallery-control1 #right_btn1:checked ~ .dir_box .btn_btn_2 {
    display: flex;
}

/* 左边第二个按钮 */
.gallery-control2 #left_btn2:checked ~ .pic .box{
    margin-left: 0;
}
.gallery-control1 #left_btn2:checked ~ .pic .box {
    margin-left: 0;
}

.gallery-control1 #left_btn2:checked ~ .left_box{
    left: calc(100%/3 * 1);
}
.gallery-control2 #left_btn2:checked ~ .dir_box .btn_btn_1{
    display: flex;
}
.gallery-control1 #left_btn2:checked ~ .dir_box .btn_btn_1 {
    display: flex;
}

/* 右边第二个按钮 */
.gallery-control2 #right_btn2:checked ~ .pic .box{
    margin-left: -200%;
}
.gallery-control1 #right_btn2:checked ~ .pic .box {
    margin-left: -200%;
}

.gallery-control2 #right_btn2:checked ~ .dir_box .btn_btn_3{
    display: flex;
}
.gallery-control1 #right_btn2:checked ~ .dir_box .btn_btn_3 {
    display: flex;
}

.gallery-control1 #right_btn2:checked ~ .left_box{
    left: 0;
}
/* 左边第三个按钮 */
.gallery-control2 #left_btn3:checked ~ .pic .box{
    margin-left: -100%;
}
.gallery-control1 #left_btn3:checked ~ .pic .box {
    margin-left: -100%;
}
.gallery-control2 #left_btn3:checked ~ .dir_box .btn_btn_2{
    display: flex;

}
.gallery-control1 #left_btn3:checked ~ .dir_box .btn_btn_2 {
    display: flex;
}
.gallery-control1 #left_btn3:checked ~ .left_box{
    left: 0;
}

/* 右边第三个按钮 */
.gallery-control2 #right_btn3:checked ~ .pic .box{
    margin-left: -300%;

}
.gallery-control1 #right_btn3:checked ~ .pic .box {
    margin-left: -300%;
    transition: margin 0.8s 0s;
}

.gallery-control1 #right_btn3:checked ~ .left_box{
    left: 0;
}
/*#right_btn3:checked ~ .pic .after_box {*/
/*    transition: left 0.8s;*/
/*    opacity: 1;*/
/*    left: -100%;*/
/*}*/

/*#right_btn3:checked ~ .pic .box {*/
/*    margin-left: 0;*/
/*    transition: margin 0.8s 0s;*/
/*}*/
.gallery-control2 #right_btn3:checked ~ .dir_box .btn_btn_4{
    display: flex;

}
.gallery-control1 #right_btn3:checked ~ .dir_box .btn_btn_4 {
    display: flex;
}

/* 左边第四个按钮 */
.gallery-control2 #left_btn4:checked ~ .pic .box{
    margin-left: -200%;
}
.gallery-control1 #left_btn4:checked ~ .pic .box {
    margin-left: -200%;
}
.gallery-control2 #left_btn4:checked ~ .dir_box .btn_btn_3{
    display: flex;

}
.gallery-control1 #left_btn4:checked ~ .dir_box .btn_btn_3 {
    display: flex;
}

.gallery-control1 #left_btn4:checked ~ .left_box{
    left: 0;
}
/* 右边第四个按钮 */
.gallery-control2 #right_btn4:checked ~ .pic .box{
    margin-left: 0;
    transition: margin 0.8s 0s;
}
.gallery-control1 #right_btn4:checked ~ .pic .box {
    margin-left: 0;
    transition: margin 0.8s 0s;
}

.gallery-control1 #right_btn4:checked ~ .left_box{
    left: calc(100%/3 * 1);
}
.gallery-control2 #right_btn4:checked ~ .dir_box .btn_btn_1{
    display: flex;
}
.gallery-control1 #right_btn4:checked ~ .dir_box .btn_btn_1 {
    display: flex;
}

.homes input[type=radio] {
    display: none;
}

.homes li {
    list-style-type: none;
}

.homes .index-main{
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 98px;
}

@media (max-width: 991px) {
    .homes .intro-main {
        max-width: 100%;
    }
}

.homes .container {
    z-index: 1;
    position: relative;
    width: 100%;
    height: calc(100vh - 98px);
    background: #333;
    overflow: hidden;

}

@media (max-width: 991px) {
    .homes .container {
        min-height: calc(40vh - 98px);
        /* padding: 41px 10px; */
    }
}

.homes .pic {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.homes .pic .box {
    position: relative;
    width: 500%;
    height: 100%;
    transition: margin 0.8s;
}

.homes .pic .box  img {
    float: left;
    width: calc(100% / 5);
    height: 100%;
    object-fit: cover;
}

.homes .pic .before_box,
.homes .pic .after_box {
    position: absolute;
    top: 0;
    width: 200%;
    height: 100%;
    opacity: 0;
}

.homes .pic .after_box {
    left: 0;
}

.homes .pic .before_box {
    right: 0;
}

.homes .pic .after_box img, .pic .before_box img {
    width: 50%;
    height: 100%;
    float: left;
    object-fit: cover;
}

.homes .count {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10%;
    /*background:rgba(255,255,255,.1);*/
}

.homes .count > ul {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    /*width:30%;*/
    height: 100%;
    padding: 50px;
}

.homes .count li {
    float: left;
    /*width:14px;*/
    /*height:14px;*/
    border: 1px solid #eee;
    /*border-radius: 50%;*/
}

.homes .count li label {
    display: block;
    width: 14px;
    height: 14px;
    background: #494a4c;
    /*border-radius: 50%;*/
    cursor: pointer;
    transition: 0.8s;
}

.homes .homes .count li .btn_1 {
    background: white;
}


.homes .dir_box {
    position: absolute;
    top: calc((100vh - 90px - 30px) / 2);
    display: flex;
    width: 100px;
    height: 100px;
    background: rgba(0, 0, 0, .2);
}

@media (max-width: 991px) {
    .homes .dir_box {
        top: calc((100% - 30px) / 2);
        width: 30px;
        height: 30px;
    }
}

.homes .left_box {
    left: 0;
}

.homes .right_box {
    right: 0;
}

.homes .dir_box label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    width: 100%;
    height: 100%;
    color: white;
    cursor: pointer;
}

.homes .left_box label::after {
    content: "\e609";
    font-family: "iconfont", serif;
}

.homes .right_box label::after {
    content: "\e62d";
    font-family: "iconfont", serif;
}

.homes .dir_box label {
    display: none;
}

.homes .left_box .left_btn_1 {
    display: flex;
}

.homes .right_box .right_btn_1 {
    display: flex;
}

.homes .page-intro {
    background-color: #eee;
    width: 100%;
    padding: 41px 200px;
    text-align: center;
    line-height: 32px;
    font-size: 16px;
    color: #555555;
}

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}
.filter-animate{
    animation: filter 2s ease-in-out;
}
@keyframes filter {
    0% {
        filter: blur(10px);
    }
    100% {  
        filter: blur(0);
    }
}

.left-animate{
    animation: slideInFromLeft 1s ease-in-out;
}

.right-animate{
    animation: slideInFromRight 1s ease-in-out;
}
@keyframes slideInFromRight {
    0% {
        transform: translateX(200%);
    }
    100% {
        transform: translateX(0);
    }
}

.fade-animate{
    animation: fade 1s ease-in-out;
}
@keyframes fade {
    0% {
        opacity: 0.4;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
.down-animate{
    animation: down 1s ease-in-out;
}
@keyframes down {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateX(0);
    }
}


@media (max-width: 991px) {
    .homes .page-intro {
        max-width: 100%;
        padding: 41px 10px;
    }
}

.homes .img-group-1 {
    align-items: center;
    background-color: #eee;
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: 0 40px;
}

@media (max-width: 991px) {
    .homes .img-group-1 {
        max-width: 100%;
    }
}

.homes .group1-title {
    text-align: center;
    border-bottom: 1px solid #dedede;
    width: 100%;
    /*max-width: 1340px;*/
    padding: 13px 20px;
    color: #444;
}


@media (max-width: 991px) {
    .homes .group1-title {
        max-width: 100%;
    }
}

.homes .group-img-1 {
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #dedede;
    display: flex;
    width: 100%;
    /*max-width: 1340px;*/
    flex-grow: 1;
    flex-direction: row;
    padding: 98px 150px;

}

@media (max-width: 991px) {
    .homes .group-img-1 {
        max-width: 100%;
        padding: 0;
        flex-direction: column;
        gap: 20px;
    }
}



.homes .group1-img {
    line-height: normal;
    width: 20%;
    margin-left: 0;
    background-color: #ffffff;
    min-height: 400px;
    height: 400px;
}

@media (max-width: 991px) {
    .homes .group1-img {
        width: 100%;
        min-height: 600px;
    }
}

.homes .group-img-1 img{
    width: 100%;
    height: 400px;
    object-fit: cover;
}

@media (max-width: 991px) {
    .homes .group-img-1 img {
        width: 100%;
        min-height: 600px;
        margin-top: 0;
    }
}

.homes .img-group-2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #dedede;
    background-color: #eee;
    width: 100%;
    padding: 100px 150px;
}

@media (max-width: 991px) {
    .homes .img-group-2 {
        max-width: 100%;
        flex-direction: column;
        padding: 100px 40px;
    }
}

.homes .group2-box {
    text-align: center;
    width: 30%;
    padding: 20px;
    display: flex;  
    font-size: 16px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    color: #444;
}

@media (max-width: 991px) {
    .homes .group2-box {
        width: 100%;
    }
}

.homes .group2-box .group2-title{
    font-size: 24px;
    font-weight: bold;
    color: #000000;
}

.homes .group2-imgs {
    display: flex;
    width: 60%;
    gap: 30px;
}

@media (max-width: 991px) {
    .homes .group2-imgs {
        width: 100%;
        margin-bottom: 10px;
        flex-direction: column;
    }
}

.homes .group2-img-box {
    justify-content: space-between;
    align-items: center;
    border: 5px solid #000;
    background-color: #fff;
    display: flex;
    width: 100%;
    flex-direction: column;
    flex: 1;
    pointer-events: auto;
    margin: 0 auto;
    padding: 20px;
}

@media (max-width: 991px) {
    .homes .group2-img-box {
        margin-top: 40px;
    }
}

.homes .group2-img {
    background-color: #e3e3e3;
    width: 100%;
    flex-direction: column;
}


/*#color-mode:checked ~ div img{*/
/*    filter:hue-rotate(70deg);*/
/*}*/

/* 预览页 */
#switch-pre:checked ~ .page .content-box{
    display: none;
}

#switch-pre:checked ~ .page .pre-box{
    display: block;
}


#switch-pre:checked ~ .page .switch-pre-btn{
    color: #fff;
    background-color: #282828;
}

#switch-pre:checked ~ .page .switch-con-btn{
    color: #000;
    background-color: #fff;
}

/* 内容页面 */
#switch-con:checked ~ .page .content-box{
    display: block;
}

#switch-con:checked ~ .page .pre-box{
    display: none;
}

#switch-con:checked ~ .page .switch-con-btn{
    color: #fff;
    background-color: #282828;
}

#switch-con:checked ~ .page .switch-pre-btn{
    color: #000;
    background-color: #fff;
}

#switch-con:checked ~  .page .switch-pre-btn:hover{
    color: #fff;
    background-color: #e40018;
}
#switch-con:checked ~  .page .switch-con-btn:hover{
    color: #fff;
    background-color: #e40018;
}

#switch-pre:checked ~  .page .switch-pre-btn:hover{
    color: #fff;
    background-color: #e40018;
}
#switch-pre:checked ~  .page .switch-con-btn:hover{
    color: #fff;
    background-color: #e40018;
}

